<template>
	<view>
		<custom-navigation-bar title="绑定小区"></custom-navigation-bar>
		<view class="main">
			 
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						区域
					</view>
					<view class="form-item-countent">
						<position-picker class="position-picker" @update-region="regionChange"></position-picker>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view> 
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						小区
					</view>
					<view class="form-item-countent">
						<!-- <picker mode = selector @change="communityChange" :range="communityArray" range-key="name">
							<view style="padding: 20rpx;background-color: white;">{{ community }}</view>
						</picker> -->
						<input type="text" class="form-item-input" placeholder="请选择小区" v-model="data.communityStr" @click="selectAddress" disabled/>
						 
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view> 
			<view class="form-item" style="margin-top: 50rpx;">
				<view style="width: 84%;float: left;margin-left: 8%;">
					<view class="btn" @click="submit">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
	import {
		defineComponent
	} from 'vue';
	import http from '../../utils/http';
	import {
		generateApplicationId,
		getCurrentTimestamp,
		generateTime
	} from '../../utils/timeUtils';
	// 提取字段
	const data = ref({
		userId: getApp().globalData.user.userId, 
		province: '',
		city: "",
		district: "",
		communityStr: ''
	});
	function selectAddress()
	{
		uni.chooseLocation({
			success(res){
				console.log(res);
				data.value.communityStr=res.name
			},
			fail(res) {
				console.log(res);
				uni.showToast({
					icon: "none",
					title: "位置获取失败!"
				})
			}
		}) 
	}
	function submit(){
		if(!getApp().globalData.user.userId){
			uni.navigateTo({
				url: "/pages/login/login"
			});
			return;
		}
		uni.showLoading({
			title: '设置中',
			mask:true
		});  
		http.request({
		 	url: "/home/community/set",
		 	method: "POST",
		 	data: { 
				user:data.value
			}
		}).then((responseData) => { 
			uni.hideLoading();
			console.log(responseData)
			if(responseData.code==1){
				uni.showToast({
					icon: 'success',
					title: '成功'
				})
				uni.navigateBack(); 
			}else if(responseData.code==0){
				uni.showToast({
					icon: 'error',
					title: responseData.message
				})
			}else if(responseData.code==-1){
				uni.navigateTo({
					url: "/pages/login/login"
				});
			}
		}).catch((err) => {
			uni.hideLoading();
		 	uni.showToast({
		 		icon: 'error',
		 		title: '请求失败'
		 	})
		}) 
	}
	 
	// 所在区域
	function regionChange(e) {
		// console.log("position", e[0] + "-" + e[1] + "-" + e[2])
		// applicationContent.value.region = e[0] + "-" + e[1] + "-" + e[2]
		data.value.province = e[0]
		data.value.city = e[1]
		data.value.district = e[2]
		getCommunityList(e[1], e[2])
	}
	 
	const communityArray = ref([])
	const community = ref("请选择小区")
	// 申请的社区
	function communityChange(e) {
		community.value = communityArray.value[e.detail.value].name;
		data.value.community =communityArray.value[e.detail.value].id;
	}
   
	// 获取社区信息
	function getCommunityList(city,district) {
		http.request({
			url: "/home/village",
			method: "POST",
			data: {
				 village:{
					 "city": city,
					 "district": district
				 } 
			}
		}).then((responseData) => {
			if (responseData.code) {
				console.log("community", responseData.data)
				communityArray.value = responseData.data
			} else {
				uni.showToast({
					icon: 'error',
					title: responseData.message,
					duration: 3000
				})
				communityArray.value = []
			}
		}).catch((err) => {
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			})
		})
	}
	 import {
	 	onShow
	 } from '@dcloudio/uni-app';
	 onShow((query) => {
	 	data.value.userId=getApp().globalData.user.userId;  
	 })
</script>

<style>
	@import "../application/form.scss";
	Page{
		background: white;
	}
</style>